<template>
  <div style="margin-left: 20px">
    <div  style="color: #f30d0d;">----------- 主题 -----------</div>
    <span  style="color: #f30d0d;"> 基本描述: </span>
    <p>
    绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
    设置disabled属性，接受一个Boolean，设置true即可禁用。
    </p>
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
    <el-switch
      disabled
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>


    <br><p>
      <span  style="color: #f30d0d;">文字描述:  </span>
    使用active-text属性与inactive-text属性来设置开关的文字描述。
    </p>
    <el-switch
      v-model="value1"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>
    
    
    <el-switch
      style="display: block"
      v-model="value2"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>



    <el-tooltip :content="'Switch value: ' + value" placement="top">
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="100"
        inactive-value="0">
      </el-switch>
    </el-tooltip>

  </div>
</template>

<script>
    export default {
    data: () => ({
      value: true,
      value1: true,
      value2: true
    })
  }
</script>

<style>
  
</style>